
<template>
  <div style="position: relative;">
    <video preload="auto" ref="videoPlayer" controls style="width: 100%;min-width: 640px;" @play="onPlay"
      @pause="onPause">
      <source :src="videoSource" type="video/mp4">

    </video>
    <h3>{{ currentTime }}</h3><br>
    <h3>{{ duration }}</h3>

    <div class="controls" style=" position: absolute; top: 0; left: 0;">
      <button @click="onPlay">播放</button>
      {{ isPlaying ? 'Pause' : 'Play' }}

      <button @click="onPause">播放</button>
    </div>
  </div>
</template>

<script setup lang="ts">

import { ref, onMounted } from 'vue';

import { defineProps } from 'vue';
defineProps({
  videoSource: {
    type: String,
    default: "https://firebasestorage.googleapis.com/v0/b/test-c0063.appspot.com/o/1699798470473_wingman_1.mp4?alt=media&token=a3af8efc-1562-49a6-91ef-76ad0eebea28"
  }
})
const isPlaying = ref(false)
const currentTime = ref('0:00')
const duration = ref('0:00')

const videoPlayer: HTMLVideoElement | any = ref()
onMounted(() => {
  videoPlayer.value.addEventListener('timeupdate', updateTime);
  videoPlayer.value.addEventListener('durationchange', updateDuration);
})

// onBeforeMount(() => {
//   videoPlayer.value.addEventListener('timeupdate', updateTime);
//   videoPlayer.value.addEventListener('durationchange', updateDuration);
// })




const updateDuration = () => {
  duration.value = formatTime(videoPlayer.value.duration);
}
const updateTime = () => {
  currentTime.value = formatTime(videoPlayer.value.currentTime);
}

const formatTime = (time: number): string => {
  const minutes = Math.floor(time / 60);
  const seconds = Math.floor(time % 60);
  return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
}

// 播放
const onPlay = () => {
  isPlaying.value = true
  videoPlayer.value.play()

}

// 暂停
const onPause = () => {
  isPlaying.value = false
  videoPlayer.value.pause()
}

</script>

<style lang="less" scoped></style>
